<template>
    <div class="BingdingOwner">
        <Addtitle>业主绑定</Addtitle>
        <div class="frombox">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="basicinformation">
                    <div class="basicleft">
                        <p class="title">基础信息</p>
                        <el-form-item label="关联房屋：" prop="Relatedhouses" class="inputbox">
                            <el-input v-model="ruleForm.Relatedhouses" placeholder="请输入关联房屋"></el-input>
                        </el-form-item>
                        <el-form-item label="业主类型：" prop="ownertype" class="inputbox">
                            <el-select v-model="ruleForm.ownertype" placeholder="请选择业主类型">
                            <el-option label="业主" value="业主"></el-option>
                            <el-option label="住户" value="住户"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="姓名：" prop="name" class="inputbox">
                            <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号：" prop="phonenumber" class="inputbox">
                            <el-input v-model="ruleForm.phonenumber" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号：" prop="IDcard" class="inputbox">
                            <el-input v-model="ruleForm.IDcard" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                        <el-form-item label="性别：" prop="sex" class="inputbox">
                            <el-radio-group v-model="ruleForm.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="出生日期：" required class="datebox">
                            <el-form-item prop="DateofBirth" class="date">
                                <!-- <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.DateofBirth" style="width: 100%;" 
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                ></el-date-picker> -->
                                <el-date-picker
                                    v-model="ruleForm.DateofBirth"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    :picker-options="pickerOptions"
                                    placeholder="选择日期" class="datapicker">
                                </el-date-picker>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="户籍所在地：" prop="Registeredresidence" class="inputbox">
                            <el-input v-model="ruleForm.Registeredresidence" placeholder="请输入户籍所在地"></el-input>
                        </el-form-item>
                    </div>
                    <div class="basicleft">
                        <p class="title">其他信息</p>
                        <el-form-item label="民族：" prop="nation" class="inputbox">
                            <el-select v-model="ruleForm.nation" placeholder="请选择民族">
                            <el-option label="汉族" value="汉族"></el-option>
                            <el-option label="回族" value="回族"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="政治面貌：" prop="Politicalaffiliation" class="inputbox">
                            <el-select v-model="ruleForm.Politicalaffiliation" placeholder="请选择政治面貌">
                            <el-option label="共青团员" value="共青团员"></el-option>
                            <el-option label="中共党员" value="中共党员"></el-option>
                            <el-option label="预备党员" value="预备党员"></el-option>
                            <el-option label="群众" value="群众"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="婚姻状况：" prop="maritalstatus" class="inputbox">
                            <el-select v-model="ruleForm.maritalstatus" placeholder="请选择婚姻状况">
                            <el-option label="已婚" value="已婚"></el-option>
                            <el-option label="未婚" value="未婚"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="居住类型：" prop="Residentialtype" class="inputbox">
                            <el-select v-model="ruleForm.Residentialtype" placeholder="请选择居住类型">
                            <el-option label="自住" value="自住"></el-option>
                            <el-option label="出租" value="出租"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="户口类型：" prop="Householdregistrationtype" class="inputbox">
                            <el-select v-model="ruleForm.Householdregistrationtype" placeholder="请选择户口类型">
                            <el-option label="城镇户口" value="城镇户口"></el-option>
                            <el-option label="农村户口" value="农村户口"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="暂住证号：" prop="TemporaryResidencePermit" class="inputbox">
                            <el-input v-model="ruleForm.TemporaryResidencePermit" placeholder="请输入暂住证号"></el-input>
                        </el-form-item>
                        <el-form-item label="现住地址：" prop="Currentresidentialaddress" class="inputbox">
                            <el-input v-model="ruleForm.Currentresidentialaddress" placeholder="请输入现住地址"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="concact">
                    <p class="title">紧急联系人</p>
                    <div class="inputboxs">
                        <el-form-item label="联系人姓名：" prop="ContactName" class="inputbox">
                            <el-input v-model="ruleForm.ContactName" placeholder="请输入紧急联系人姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="关系：" prop="Relationship" class="inputbox">
                            <el-select v-model="ruleForm.Relationship" placeholder="请选择关系">
                                <el-option label="朋友" value="朋友"></el-option>
                                <el-option label="家人" value="家人"></el-option>
                                <el-option label="租户" value="租户"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="尊称：" prop="radio" class="inputbox">
                            <el-radio-group v-model="ruleForm.radio">
                            <el-radio label="先生"></el-radio>
                            <el-radio label="女士"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="手机号码：" prop="contactphone" class="inputbox">
                            <el-input v-model="ruleForm.contactphone" placeholder="请输入紧急联系人手机号码"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="buttonbox">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" class="createbutton">保存</el-button>
                        <el-button @click="resetForm('ruleForm')" class="resatebutton">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Addtitle from '../components/Addtitle.vue'
export default {
    components:{
        Addtitle
    },
    data() {
      return {
        ruleForm: {
          Relatedhouses:'',     //关联房屋
          ownertype:'',         //业主类型
          name: '',             //业主姓名
          phonenumber:'',       //手机号码
          IDcard:'',            //身份证号
          sex:'',               //性别
          DateofBirth:'',       //出生日期
          Registeredresidence:'',//户籍所在地
          nation:'',            //民族
          Politicalaffiliation:'',//政治面貌
          maritalstatus:'',     //婚姻状况
          Residentialtype:'',   //居住类型
          Householdregistrationtype:'',//户口类型
          TemporaryResidencePermit:'',//暂住证号
          Currentresidentialaddress:'',//现住地址
          ContactName:'',               //紧急联系人姓名
          Relationship:'',              //与户主关系
          radio:'',                     //紧急联系人性别
          contactphone:'',              //紧急联系人电话
        },
        rules: {
            Relatedhouses:[
                { required: true, message: '请输入关联房屋', trigger: 'blur' },
            ],
            ownertype:[
                { required: true, message: '请选择业主类型', trigger: 'change' }
            ],
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
            ],
            phonenumber:[
                { required: true, message: '请输入电话号码', trigger: 'change' },
                { min: 9, max: 11, message: '长度在 9 到 11 个字符', trigger: 'blur' }
            ],
            IDcard:[
                { required: true, message: '请输入身份证号', trigger: 'change' },
                { min: 18, max: 18, message: '请输入18位有效身份证号', trigger: 'blur' }
            ],
            sex:[
                { required: true, message: '请选择性别', trigger: 'change' }
            ],
            DateofBirth:[
                { required: true, message: '请选择出生日期', trigger: 'change' }
            ],
            Registeredresidence:[
                { required: true, message: '请输入户籍所在地', trigger: 'blur' },
            ],
            nation:[
                { required: true, message: '请选择身民族', trigger: 'change' }
            ],
            Politicalaffiliation:[
                { required: true, message: '请选择政治面貌', trigger: 'change' }
            ],
            maritalstatus:[
                { required: true, message: '请选择婚姻状况', trigger: 'change' }
            ],
            Residentialtype:[
                { required: true, message: '请选择居住类型', trigger: 'change' }
            ],
            Householdregistrationtype:[
                { required: true, message: '请选择户口类型', trigger: 'change' }
            ],
            TemporaryResidencePermit:[
                { required: true, message: '请输入暂住证号', trigger: 'blur' },
            ],
            Currentresidentialaddress:[
                { required: true, message: '请输入现住地址', trigger: 'blur' },
            ],
            ContactName:[
                { required: true, message: '请输入紧急联系人姓名', trigger: 'blur' },
                { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
            ],
            Relationship:[
                { required: true, message: '请选择与户主关系', trigger: 'change' }
            ],
            radio:[
                { required: true, message: '请选择紧急联系尊称', trigger: 'change' }
            ],
            contactphone:[
                { required: true, message: '请输入紧急联系人电话', trigger: 'blur' },
                { min: 9, max: 11, message: '长度在 9 到 11 个字符', trigger: 'blur' }
            ],
        },
        pickerOptions:{
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
        },
      };
    },
    mounted(){
        console.log(this.$route.query)
        if(this.$route.query.data.Housetype=="商铺"){
            this.ruleForm.Relatedhouses=this.$route.query.data.Belongingcommunity+'/'+this.$route.query.data.Productarea+'/'+this.$route.query.data.ShopNumber
        }else if(this.$route.query.data.Housetype=="车位"){
            this.ruleForm.Relatedhouses=this.$route.query.data.Belongingcommunity+'/'+this.$route.query.data.GargeErea+'/'+this.$route.query.data.ParkinglotNumber
        }else if(this.$route.query.data.Housetype=="储藏室"){
            this.ruleForm.Relatedhouses=this.$route.query.data.communityName+'/'+this.$route.query.data.BuildingName+'/'+this.$route.query.data.FoolNumber+'-'+this.$route.query.data.StoreCode
        }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            if(this.$route.query.data.Housingstatus=="未使用"){
                console.log(1111)
                this.$axios.post('http://127.0.0.1/ownerinsert',{
                    ...this.ruleForm,
                    date:this.$route.query.data.date,
                    dataStore:this.$route.query.dataStore
                }).then(res=>{
                    console.log(res)
                    if(res.data.state==200){
                        this.$message({
                            message: '恭喜你，业主绑定成功',
                            type: 'success'
                        });
                        setTimeout(()=>{
                            this.$router.go(-1)
                        },1000)
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style lang="scss" scoped>
    .BingdingOwner{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        .frombox{
            width: 100%;
            padding: 40px 60px 20px 40px ;
            box-sizing: border-box;
            .basicinformation{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .basicleft{
                    width: 550px;
                    .title{
                        width: 100%;
                        height: 20px;
                        line-height: 20px;
                        border-left: 4px solid rgba(0, 121, 254, 1);
                        padding-left: 10px;
                        box-sizing: border-box;
                        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                        font-weight: 700;
                        font-style: normal;
                        font-size: 14px;
                        color: #666666;
                        margin-bottom: 10px;
                    }
                    .inputbox{
                        width: 520px;
                        ::v-deep  .el-form-item__content{
                            margin-left: 120px !important;
                        }
                        ::v-deep .el-form-item__content{
                            width: 400px;
                        }
                        ::v-deep .el-input__inner{
                            width: 400px;
                        }
                        ::v-deep .el-form-item__label{
                            width: 120px !important;
                            box-sizing: border-box;
                        }
                    }
                    .datebox{
                        width: 520px;
                        ::v-deep  .el-form-item__content{
                            margin-left: 120px !important;
                        }
                        ::v-deep .el-form-item__label{
                            width: 120px !important;
                            box-sizing: border-box;
                        }
                        ::v-deep .el-form-item__content{
                            width: 400px;
                        }
                        ::v-deep .el-input__inner{
                            width: 400px;
                        }
                        .date{
                            ::v-deep  .el-form-item__content{
                                margin-left: 0px !important;
                            }
                            // .datapicker{
                            //     width: 400px;
                            // }
                        }
                    }
                }
            }
            .concact{
                width: 100%;
                .title{
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    border-left: 4px solid rgba(0, 121, 254, 1);
                    padding-left: 10px;
                    box-sizing: border-box;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-style: normal;
                    font-size: 14px;
                    color: #666666;
                    margin-bottom: 10px;
                }
                .inputboxs{
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .inputbox{
                        width: 550px;
                        ::v-deep  .el-form-item__content{
                            margin-left: 120px !important;
                        }
                        ::v-deep .el-form-item__content{
                            width: 400px;
                        }
                        ::v-deep .el-input__inner{
                            width: 400px;
                        }
                        ::v-deep .el-form-item__label{
                            width: 120px !important;
                            box-sizing: border-box;
                        }
                    }
                }
            }
            .buttonbox{
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-top: 1px solid #f2f2f2;
                ::v-deep .el-form-item__content{
                    margin-left: 0 !important;
                }
                ::v-deep .el-form-item{
                    margin-bottom:  0 !important;
                }
                .createbutton{
                    width: 140px;
                    height: 40px;
                    background-color: #0079fe;
                }
                .resatebutton{
                    width: 140px;
                    height: 40px;
                    background-color: #fff;
                    border-color: #0079fe;
                    color: #0079fe;
                }
            }
        }
    }
</style>